<!DOCTYPE html>
<html>
<head>
	<title>html-layout</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="css/1-11.css">
</head>
<body>
	<div id="container" style="width: 600px">

		<div id='header' style='background-color: yellow;'>
			<h1 style='margin-bottom: 0; text-align: center;'>main title of the web</h1>
		</div>

		<div id="menu" style="background-color: red; width:200px;height: 200px; float: left;">
			<ul>
				<li>HTML</li>
				<li>CSS</li>
				<li>JAVASCRIPT</li>
			</ul>
		</div>

<!--		<div id="content" style="width: 400px; height: 200px; background-color: grey;float: left;"> -->
		<div class="content">
			<h1>
				This is my content!
			</h1>
		</div>

		<div id="footer" style="background-color: yellow; text-align: center;">
			<h1>this is my footer</h1>
		</div>
	</div>
</body>
</html>